<template>
  <el-card>
    <template #header>
      <div>
        <span>用户信息</span>
        <CameraQrScan
          v-if="props.type === 'camera'"
          @scan-success="handleQrCodeScanSuccess"
        />
        <gun-qr-scan
          v-if="props.type === 'gun'"
          @scan-success="handleGunQrCodeScanSuccess"
        ></gun-qr-scan>
      </div>
    </template>
    <div class="id-card">
      <div class="id-info">
        <div>姓名：{{ props.userData?.username }}</div>
        <div>性别：{{ props.userData?.sex }}</div>
        <div>身份证号：{{ props.userData?.idno }}</div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { IQRCodeInfo } from "@/model/IQRCodeInfo";
import { shell } from "electron";
import CameraQrScan from "./CameraQrScan.vue";
import GunQrScan from "./GunQrScan.vue";

const props = defineProps({
  userData: {
    type: Object,
    default: () => {
      return {};
    },
  },
  type: {
    type: String,
    default: "camera",
  },
});
defineOptions({
  name: "UserCard",
});
const emits = defineEmits(["update:userData"]);
const handleQrCodeScanSuccess = (data: string) => {
  try {
    emits("update:userData", JSON.parse(data) as IQRCodeInfo);
    var msg = new SpeechSynthesisUtterance("扫码成功");
    window.speechSynthesis.speak(msg);
  } catch (e) {}
};
const handleGunQrCodeScanSuccess = (data: IQRCodeInfo) => {
  var msg = new SpeechSynthesisUtterance("扫码成功");
  window.speechSynthesis.speak(msg);
  emits("update:userData", data);
};
</script>

<style scoped lang="scss">
.id-card {
  width: 100%;
  font-size: 20px;
  display: flex;
  line-height: 35px;

  .id-avatar {
    padding-top: 10px;
    width: 80px;
    height: 100px;
  }

  .id-info {
    height: 100px;
  }
}
</style>
